<style lang="scss" scoped>
  .cardStyle {
    overflow-y: auto;
    height: calc(100vh - 144px);
    width: 100%;
    flex: 30;
    background-color: #FFFFFF;
    padding: 20px;
  }

  .card {
    position: relative;
    // margin-left: 15px;
    margin-right: 14px;
    margin-bottom: 14px;
    border-radius: 4px;
    width: 145px;
    height: 200px;
    border: 1px solid #dcdae2;
    float: left;
    text-align: center;

    .title {
      height: 40px;
      padding: 0px 8px 8px;
      font-size: 14px;
      font-weight: bold;
    }

    .desc {
      padding: 0px 8px 8px;
      height: 50px;
      font-size: 12px;
      color: #666666;

    }
  }

  .card:hover {
    // border: 1.5px solid #75b5ff;
    cursor: pointer;
    transform: translateY(-1%);
    -webkit-box-shadow: 0px 4px 10px 2px #CCC;
    -webkit-transition: all .4s;
  }

  .change {
    width: 30px;
    height: 30px;
    line-height: 22px;
    padding: 4px;
    float: left;
  }

  .change:hover {
    border: 1px solid #75b5ff;
    // background-color: #75b5ff9c;
  }

  .change:active {
    border: 1px solid #75b5ff;
    // background-color: #75b5ff9c;
  }

  .process_list {
    margin-right: 1%;
    margin-bottom: 14px;
    border-radius: 4px;
    width: 100%;
    float: left;

    .list_title {
      font-size: 16px;
      height: 50px;
      font-weight: bold;
      display: flex;
      align-items: center;
      padding-left: 15px;
      border-bottom: 1px solid #d2d2d2;
    }

    .list_content {
      font-size: 14px;
      padding-top: 10px;
      padding-left: 40px;
    }

    .list_li {
      margin: 0;
      line-height: normal;
      padding: 7px 16px;
      clear: both;
      color: #515a6e;
      font-size: 14px !important;
      white-space: nowrap;
      list-style: none;
      cursor: pointer;
      transition: background 0.2s ease-in-out;
    }

    .list_li:hover {
      background: #f3f3f3;
    }
  }
</style>
<template>
  <div>
    <pheader style="border-bottom: 1px solid #dcdae2; ">
      <div slot="left">新建工单</div>
      <div slot="right" style="float:right;margin-right: 25px;">
        <div v-if="!isList" class="change" @click="isList = true">
          <img src="../../static/image/list.png" width="100%" height="100%">
        </div>
        <div v-else class="change" :style="{border:'1px solid #75b5ff'}">
          <img src="../../static/image/list_check.png" width="100%" height="100%">
        </div>
        <div v-if="!isList" class="change" :style="{border:'1px solid #75b5ff'}">
          <img src="../../static/image/card_check.png" width="100%" height="100%">
        </div>
        <div v-else class="change" @click="isList = false">
          <img src="../../static/image/card.png" width="100%" height="100%">
        </div>
        <!-- <Icon type="ios-image-outline" size="24" style="background-color: #75b5ff;" /> -->
      </div>
    </pheader>
    <div class="cardStyle" style="">
      <template v-if="processList.length > 0">
        <div v-show="!isList">
          <template v-for="item in processList">
            <div class="card " @click="processApply(item)">
              <div style="padding: 15px">
                <img :src="getNewImage(item)" style="position: absolute;top: 0px;left: 0px;"/>
                <img :src="getImage(item)">
              </div>
              <div class="title">
                <Tooltip content="" max-width="200" placement="top" theme="light" :transfer="true" style="white-space: normal;">
                  <span>{{item.depname}}</span>
                  <template slot="content">
                    <span style="color:rgb(179,179,179)">点击创建工单</span>
                  </template>
                </Tooltip>
              </div>
              <div class="desc">
                <Tooltip content="" max-width="200" placement="top" theme="light" :transfer="true" style="white-space: normal;">
                  <span style="overflow: hidden;-webkit-line-clamp: 2;  -webkit-box-orient: vertical;display: -webkit-box;">{{item.des}}</span>
                  <template slot="content">
                    <span style="color:rgb(179,179,179)">{{item.des}}</span>
                  </template>
                </Tooltip>
              </div>
            </div>
          </template>
        </div>
        <div v-show="isList">
          <template v-for="(item,index) in listProcess">
            <div class="process_list" :key="index">
              <div class="list_title">
                <div style="float:left;width: 24px;line-height: 10px;">
                  <img src="../../static/image/circle.png" style="width: 100%;">
                </div>
                <div style="float:left;padding-left:8px">
                  <span>{{item.title}}</span>
                </div>
              </div>
              <ul class="list_content">
                <template v-for="i in item.list">
                  <div class="card " @click="processApply(i)">
                    <div style="padding: 15px">
                      <img :src="getNewImage(i)" style="position: absolute;top: 0px;left: 0px;"/>
                      <img :src="getImage(i)">
                    </div>
                    <div class="title">
                      <Tooltip content="" max-width="200" placement="top" theme="light" :transfer="true" style="white-space: normal;">
                        <span>{{i.depname}}</span>
                        <template slot="content">
                          <span style="color:rgb(179,179,179)">点击创建工单</span>
                        </template>
                      </Tooltip>
                    </div>
                    <div class="desc">
                      <Tooltip content="" max-width="200" placement="top" theme="light" :transfer="true" style="white-space: normal;">
                        <span style="overflow: hidden;-webkit-line-clamp: 2;  -webkit-box-orient: vertical;display: -webkit-box;">{{i.des}}</span>
                        <template slot="content">
                          <span style="color:rgb(179,179,179)">{{i.des}}</span>
                        </template>
                      </Tooltip>
                    </div>
                  </div>
                </template>
              </ul>
            </div>
          </template>
        </div>
      </template>
      <template v-else>
        <Card style="width:100%" :bordered="false" class="entry_inner">
          <p>暂无可选择的工单</p>
        </Card>
      </template>
      <!-- <template v-if="processList.length > 0">
              <template  v-for="item in processList" >

                <div class="entry" >
                  <Card style="width:100%"  :bordered="false" class="entry_inner" >
                    <div slot="title" >
                      <div style="display: flex;align-items: center" @click="processApply(item)">
                        <Icon type="ios-browsers-outline" size="20" color="#00c853"/>
                        <Button @click="disabled = true" style="margin-left: 10px; font-size: 16px">{{item.depname}}</Button>
                      </div>
                    </div>
                      {{processInfo.find(e => e.serviceType == item.depkey).serviceType}}
                    <p >{{item.des}}{{processInfo.find(e => e.serviceType == item.depkey).image}}</p>
                    <img :src="processInfo.find(e => e.serviceType == item.depkey).image"></img>
                  </Card>
                </div>
              </template>
            </template> -->
    </div>
  </div>
</template>

<script>
  import ajax from "../ajax_util"
  import pheader from "../comp_chatter/pheader"
  import processJson from "../../static/process";
  export default {
    components: {
      pheader
    },
    data() {
      return {
        listProcess: [],
        isList: true,
        tabs: {},
        menuid: "",
        processInfo: [],
        processList: []
      }
    },
    created: function() {
      this.processInfo = processJson
      this.menuid = this.$route.params.menuid

    },
    mounted() {
      this.tabs = this.$store.state.tabs
      this.getAllProcess()
      // this.processApplytest()
    },
    methods: {
      getNewImage(item) {
        var t = this.processInfo.find(e => e.serviceType == item.depkey)
        if (t != undefined) {
          return t.newImage
        } else {
          return null
        }
      },
      getImage(item) {
        var t = this.processInfo.find(e => e.serviceType == item.depkey)
        if (t != undefined) {
          return t.image
        } else {
          return "./static/image/default.svg"
        }
      },
      // 对流程分类
      setProcessType() {
        var temp = []
        this.processList.forEach(item => {
          var t = this.processInfo.find(e => e.serviceType === item.depkey)
          if (t != undefined) {
            item.classT = t.classT
            item.image = t.image
          } else {
            item.classT = "其他"
            item.image = "./static/image/default.svg"
          }
        })
        var other = {
          title: "其他",
          list: []
        }
        this.processList.forEach(item => {
          if (item.classT === "其他") {
            other.list.push(item)
          } else {
            if (temp.length > 0) {
              var t = temp.find(e => e.title == item.classT)
              if (t != undefined) {
                t.list.push(item)
              } else {
                temp.push({
                  title: item.classT,
                  list: [item]
                })
              }
            } else {
              temp.push({
                title: item.classT,
                list: [item]
              })
            }
          }
        })
        if (other.list.length > 0) {
          temp.push(other)
        }
        this.listProcess = temp
        console.log(temp)
      },
      getAllProcess() {
        var url = this.CONFIG.base_url_test + "/acti-services"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.processList = data
            that.setProcessType()
          }
        })
      },
      processApply(applyInfo) {
        var isName = false //是否已经存在标签
        this.tabs.list.some(item => {
          if (item.tabKey === applyInfo.serviceType) {
            isName = true
            return
          }
        })
        if (!isName) {
          this.tabs.list.push({
            title: "创建工单 / " + applyInfo.depname,
            key: "apply",
            tabKey: applyInfo.serviceType,
            params: {
              serviceType: applyInfo.serviceType,
              depname: applyInfo.depname
            }
          })
        }
        this.tabs.lastPage = this.tabs.tabsPage
        this.tabs.tabsPage = applyInfo.serviceType
        this.$store.commit("tabs", this.tabs);
      },
      processApplytest() {
        var isName = false //是否已经存在标签

        if (!isName) {
          this.tabs.list.push({
            title: "创建工单 / ",
            key: "apply",
            tabKey: "all",
            params: {
              serviceType: "all",
            }
          })
        }
        this.tabs.tabsPage = "all"
      },
    },
  }
</script>
